<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8" isELIgnored="false"%>
<%@ include file="/WEB-INF/views/shared/taglib.jsp"%>
<%
	request.setAttribute("modelConfigPath", "customer");
%>

<%@ include file="/WEB-INF/views/shared/master/contentHeader.jsp"%>

<style type="text/css">
	body{
		background-color: #fff;
	}
	
	.selectTab,.updateTab{
		margin-bottom: 0px;
	}
	.updateTab{
		margin-top: 10px;
	}
	.loadTab{
		margin-left: 10px;
		margin-bottom: 0px;
	}
	.selectTab .panel-heading,.loadTab .panel-heading,.updateTab .panel-heading{
		padding: 1px 10px;
	}
	.row{
		margin-left: 0px;
		margin-right: 0px;
	}
	.heading-elements{
		margin-top: -15px;
	}
	.heading-elements ul.icons-list{
		margin-top: 7px !important;		
	} 
	

.changeColor{
	background-color:#27a9e3 !important;
	color:white !important;
}

 .inews ul {
    margin: 10px 10px 20px;
    height: 150px;
    overflow: hidden;
}
.inews ul li {
    height: 30px;
    line-height: 30px;
    overflow: hidden;
    
} 
.sum{
 	height: 200px;
}
.personMumUp{
	border-bottom: 1px solid #27a9e3;
}
.personMumDown{
	border-bottom: 1px solid #28b779;
}
.moneyUp{
	border-bottom: 1px solid #852b99;
}
.moneyDown{
	border-bottom: 1px solid #ffb848;
}
.personMumUp > div{
	height: 200px;
    padding:0px;
	background-color:#27a9e3;
	border-right:1px;
}

.personMumUp > div >div{
    position: relative;
	height: 200px;
	background-color: white;
}
.personMumDown > div{
    height: 200px;
    padding:0px;
	background-color:#28b779;
}
.personMumDown  >div >div{
    position: relative;
    height: 200px;
	background-color: white;
}
.moneyUp > div{
    height: 200px;
    padding:0px;
	background-color:#852b99;
}
.moneyUp > div >div{
    position: relative;
    height: 200px;
    padding:0px;
	background-color: white;

}
.moneyDown > div{
    height: 200px;
    padding:0px;
	background-color:#ffb848;
}
.moneyDown >div >div{
    position: relative;
    height: 200px;
	background-color: white;
}
.showName{
        position: absolute;
        bottom: 5px;
        overflow:hidden;
		/* text-overflow:ellipsis;	
		display:-webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		line-height: 1.1rem;  */
}
.showDetail{
margin-top: 30px;
height: 30px;
width: 0;
background-color: red;
}

.forPeople >div >div{
height:30px;
display: inline-block;
}

.left{

width: 80px;

}
.left >span{
height:30px;
line-height:30px;
margin-bottom: 30px;
}
.right{
width: 80px;

}


.clear{
	clear: both;
	height: 30px;
}
.forPeople_public{
	text-align:center;
	width: 70px;
	height: 30px;
	line-height: 30px;
	float: left;
}

</style>
<div class="row" style="margin: 10px 20px;">
	<div class="col-sm-3">
		<div class="col-sm-12 loadTab-button" style="margin-left: 3px;margin-top: 10px;">
			<t:button style="width:100%;background-color:#27a9e3;color:white" cssClass="" csize="60px" data-name="${customerTree.username}" data-id="${customerTree.id}" icon="icon-users2" title="${customerTree.username}"><p style="margin-top: 5px">一代高创(${customerTree.firstHighMaker})</p></t:button>
		</div>
	</div>
	<div class="col-sm-3">
		<div class="col-sm-12 loadTab-button" style="margin-left: 3px;margin-top: 10px;">
			<t:button style="width:100%;background-color:#28b779;color:white" cssClass="" csize="60px" data-name="${customerTree.username}" data-id="${customerTree.id}" icon="icon-users2" title="${customerTree.username}"><p style="margin-top: 5px">一代初创(${customerTree.firstMaker})</p></t:button>
		</div>
	</div>
	<div class="col-sm-3">
		<div class="col-sm-12 loadTab-button" style="margin-left: 3px;margin-top: 10px;">
			<t:button style="width:100%;background-color:#852b99;color:white" cssClass="" csize="60px" data-name="${customerTree.username}" data-id="${customerTree.id}" icon="icon-users2" title="${customerTree.username}"><p style="margin-top: 5px">一代会员(${customerTree.firstVip})</p></t:button>
		</div>
	</div>
	<div class="col-sm-3">
		<div class="col-sm-12 loadTab-button" style="margin-left: 3px;margin-top: 10px;">
			<t:button style="width:100%;background-color:#ffb848;color:white" cssClass="" csize="60px" data-name="${customerTree.username}" data-id="${customerTree.id}" icon="icon-users2" title="${customerTree.username}"><p style="margin-top: 5px">一代游客(${customerTree.firstVisitor})</p></t:button>
		</div>
	</div>
</div>
<div class="row">
	<div style="height:550px;padding-right: 0px;padding-left: 0px;" class="col-sm-3">
		<t:panel cssClass="panel-flat border-top-xlg border-top-primary loadTab" customBody="true" customHead="true">
			<t:panelHead title="亲友连<span class='text-success small'>(悬浮可查看)</span>"></t:panelHead>
			<div class="panel-body" style="padding: 0px;padding-bottom: 10px;height:510px;overflow: scroll;margin-top: 8px" id="express">
				
				<c:forEach items="${customerTrees}" var="customerTree">
					<div class="col-sm-12 loadTab-button" style="margin-left: 3px;margin-top: 10px;">
						<t:button style="width:100%;"  class="people" cssClass="" csize="60px" data-name="${customerTree.username}" data-id="${customerTree.id}" icon="${customerTree.icon}" title="${customerTree.username}" 
						 data-visitor="${customerTree.firstVisitor}"  data-vip="${customerTree.firstVip}"  data-maker="${customerTree.firstMaker}" data-high = "${customerTree.firstHighMaker}"  data-notcar = "${customerTree.notcar}" data-car="${customerTree.car}"
						 ><p >${customerTree.username}</p></t:button>
					</div>
				</c:forEach>
			
			</div>
		</t:panel>
	</div>
	
	
	<div style="height:550px;padding-right: 6px;padding-left: 6px;" class="col-sm-9 ">
	<t:panel cssClass="panel-flat border-top-xlg border-top-primary loadTab" customBody="true" customHead="true">
		
		<div class="row tab1">
			<t:panelHead title="直属亲友排行榜<span class='text-success small'>(左边前三右边末三)</span>"></t:panelHead>
            <div class="col-sm-6 row sum personMumUp">
            
                <div class="col-sm-2 col-sm-push-2 two">
                	<div class="two_top">
                		<p  class="showName" title="直属亲友总数：${personDescs[1].totalPerson}">${personDescs[1].username}</p>
                	</div>
                </div>
                <div class="col-sm-2 col-sm-push-3 one">
                	<div class="one_top">
                		<p  class="showName" title="直属亲友总数：${personDescs[0].totalPerson}">${personDescs[0].username}</p>
                	</div>
                </div>
                <div class="col-sm-2 col-sm-push-4 three">
                	<div class="three_top" >
                		<p  class="showName" title="直属亲友总数：${personDescs[2].totalPerson}">${personDescs[2].username}</p>
                	</div>
                </div>
            </div>
            <div class="col-sm-6 row sum personMumDown">
                <div class="col-sm-2 col-sm-push-2 two">
                	<div class="two_top" >
                		<p  class="showName" title="直属亲友总数：${personAscs[1].totalPerson}">${personAscs[1].username}</p>
                	</div>
                </div>
                <div class="col-sm-2 col-sm-push-3 one">
                	<div class="one_top" >
                		<p  class="showName" title="直属亲友总数：${personAscs[0].totalPerson}">${personAscs[0].username}</p>
                	</div>
                </div>
                <div class="col-sm-2 col-sm-push-4 three">
                	<div class="three_top" >
                		<p  class="showName" title="直属亲友总数：${personAscs[2].totalPerson}">${personAscs[2].username}</p>
                	</div>
                </div>
            </div>
        </div>
        <div class="row tab1">
            <t:panelHead title="消费排行榜<span class='text-success small'>(左边前三右边末三)</span>"></t:panelHead>
            <div class="col-sm-6 row sum moneyUp">
                <div class="col-sm-2 col-sm-push-2 two">
                	<div class="two_top" >
                		<p  class="showName" title="消费总数：${moneyDescs[1].personalConsumption}">${moneyDescs[1].username}</p>
                	</div>
                </div>
                <div class="col-sm-2 col-sm-push-3 one">
                	<div class="one_top" >
                		<p  class="showName" title="消费总数：${moneyDescs[0].personalConsumption}">${moneyDescs[0].username}</p>
                	</div>
                </div>
                <div class="col-sm-2 col-sm-push-4 three">
                	<div class="three_top" >
                		<p  class="showName" title="消费总数：${moneyDescs[2].personalConsumption}">${moneyDescs[2].username}</p>
                	</div>
                </div>
            </div>
            <div class="col-sm-6 row sum moneyDown">
            	<div class="col-sm-2 col-sm-push-2 two">
                	<div class="two_top" >
                		<p  class="showName" title="消费总数：${moneyAscs[1].personalConsumption}">${moneyAscs[1].username}</p>	
                	</div>
                </div>
                <div class="col-sm-2 col-sm-push-3 one">
                	<div class="one_top" >
                		<p  class="showName" title="消费总数：${moneyAscs[0].personalConsumption}">${moneyAscs[0].username}</p>
                	</div>
                </div>
                <div class="col-sm-2 col-sm-push-4 three">
                	<div class="three_top" >
                		<p  class="showName" title="消费总数：${moneyAscs[2].personalConsumption}">${moneyAscs[2].username}</p>
                	</div>
                </div>
            </div>
        </div>
             
        <div style="height:453px;" class="row  tab2">  
        	
 			<div class="forPeople">
 				<t:panelHead title="<span class='text-success small'>（团队统计，比例为5:1）</span>"></t:panelHead>
 				<div style="padding-top: 30px;">
		        	<div class="forPeople_public left">高创数：</div>
		            <div class="forPeople_public highMaker" style="background-color: red;"></div>
		            <div class="forPeople_public right" style="width: 20px">0</div>        
		        </div>
		        <div class="clear"></div>
		        
		        <div>
		        	<div class="forPeople_public left">初创数：</div>
		            <div class="forPeople_public maker" style="background-color: red;"></div>
		            <div class="forPeople_public right" style="width: 20px">0</div>        
		        </div>
		        <div class="clear"></div>
		        
		       <div>
		        	<div class="forPeople_public left">会员数：</div>
		            <div class="forPeople_public vip" style="background-color: red;"></div>
		            <div class="forPeople_public right" style="width: 20px">0</div>        
		        </div>
		        <div class="clear"></div>
		        
		        <div>
		        	<div class="forPeople_public left">游客数：</div>
		            <div class="forPeople_public visitor" style="background-color: red;"></div>
		            <div class="forPeople_public right" style="width: 20px">0</div>        
		        </div>
		        <div style="clear: both;padding-bottom: 30px"></div> 				 				 								
 			</div>
 			<div class="forMoney">
 				<t:panelHead title="<span class='text-success small'>（消费统计，比例为100:1）</span>"></t:panelHead>
 				<div style="padding-top: 30px;">
		        	<div class="forPeople_public left">非车险：</div>
		            <div class="forPeople_public notcar" style="background-color: red;"></div>
		            <div class="forPeople_public right" style="width: 20px">0</div>        
		        </div>
		        <div class="clear"></div>
 				<div>
		        	<div class="forPeople_public left">车险：</div>
		            <div class="forPeople_public car" style="background-color: red;"></div>
		            <div class="forPeople_public right" style="width: 20px">0</div>        
		        </div>
		        <div style="clear: both;padding-bottom: 30px"></div> 
 			</div>
 			
 		</div>
        </t:panel>
  
      
 
 <div class="row" style="margin: 10px 20px;">
	<div class="col-sm-6">
		 <div class="col-sm-12 loadTab-button" style="margin-left: 3px;margin-top: 10px;">
			<t:button style="width:100%;background-color:#27a9e3;color:white" cssClass="" csize="60px" data-name="${customerTree.username}" data-id="${customerTree.id}" icon="icon-cart2" title="${customerTree.username}"><p style="margin-top: 5px">非车险消费总额:${customerTree.notcar}元</p></t:button>
		</div> 
	
	</div>
	<div class="col-sm-6">
		 <div class="col-sm-12 loadTab-button" style="margin-left: 3px;margin-top: 10px;">
			<t:button style="width:100%;background-color:#28b779;color:white" cssClass="" csize="60px" data-name="${customerTree.username}" data-id="${customerTree.id}" icon="icon-car2" title="${customerTree.username}"><p style="margin-top: 5px">车险消费总额:${customerTree.car}元</p></t:button>
		</div> 
	
	</div>
</div>
	</div>
</div>


<script type="text/javascript">
$(function(){
	$(".tab2").hide();
    function movedown(){
        var marginTop = 10 ;
        var stop =false;
        var interval = setInterval(function(){
            if(stop) return;
            $('#express').children('div').first().animate({
                    'margin-top':marginTop--},
                10,
                function(){
                    var $first =$(this);
                    if(!$first.is(':animated')){
                        if((-marginTop)>$first.height()){
                            $first.css({'margin-top':10}).appendTo($('#express'));
                            marginTop = 10;
                        }
                    }
                });
        },50);
        $('#express > div').mouseover(function(){
        	$(this).css("background-color","#abddf4"); 
        	var $button = $(this).children("button")
        	$button.addClass("changeColor");
        		$(".tab2").show();
                $(".tab1").hide();
                var visitor=$button.data("visitor");
                var vip=$button.data("vip");
                var maker=$button.data("maker");
                var highMaker=$button.data("high");
                var notcar=$button.data("notcar");
                var car=$button.data("car");
                var name = $button.data("name");
                var id =$button.data("id");
                
                	$(".highMaker").css({width:5 * highMaker});
                	$(".highMaker").next().text(highMaker);
                	
                	$(".maker").css({width:5 * maker});
                	$(".maker").next().text(maker);
                	
                	$(".vip").css({width:5 * vip});
                	$(".vip").next().text(vip);
                	
                	$(".visitor").css({width:5 * visitor});
                	$(".visitor").next().text(visitor);
                	
                	$(".notcar").css({width:notcar /100});
                	$(".notcar").next().text(notcar);
                	
                	$(".car").css({width:car}); 
                	$(".car").next().text(car);
                   /*  $(".highMaker").animate({width:10 * highMaker},3000);
                	$(".maker").animate({width:10 * maker},1000);
                	$(".vip").animate({width:10 * vip},1000);
                	$(".visitor").animate({width:10 * visitor},1000);
                	$(".notcar").animate({width:notcar},1000);
                	$(".car").animate({width:car},1000);  */
                	$button.click(function(){
                		
                			top.openModal("/admin/cust/customer/teamClassDetailed?key="+id+"&mode=3",id,"【" + name + "】" + " 的团队层次-查看",800,640); 
                			closeModal();
                		
                		
                	})
                	
            
        	stop = true;
        }).mouseout(function(){
            stop = false;
            $(this).children("button").removeClass("changeColor");
             $(".showDetail").css({width:0}); 
            $(".tab1").show();
            $(".tab2").hide();
           
        });
    }
    movedown();
    
    
    
  
   	 $(".one_top").animate({height:'70px'},3000);
   	 $(".two_top").animate({height:'100px'},3000);
	 $(".three_top").animate({height:'120px'},3000); 
	     
});








</script>


<%-- <%@ include file="/WEB-INF/views/shared/master/dialog.jsp"%> --%>
<%@ include file="/WEB-INF/views/shared//master/contentFooter.jsp"%>